<!DOCTYPE html>
<html>
<head>
	<title>订单详情</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/user.css">
	<style type="text/css">[v-cloak]{display: none;}</style>
</head>
<body class="body_bg order_body">
<div id="app" v-cloak>
	<div class="status_big_box" id="scrollBox">
		<div class="status_box disFlex">
			<div>
				<p class="tips_head">提交预约</p>
				<img :src="status1==2?'img/img_status2.png':(status1==1?'img/img_status3.png':'img/img_status1.png')" class="icon_status " alt="">
				<p class="time">2019-6-12 12:30</p>
			</div>
			<div>
				<p class="tips_head">成功核对</p>
				<img :src="status2==2?'img/img_status2.png':(status2==1?'img/img_status3.png':'img/img_status1.png')" class="icon_status" alt="">
				<p class="time">核对中…</p>
			</div>
			<div>
				<p class="tips_head">成功支付</p>
				<img :src="status3==2?'img/img_status2.png':status3==1?'img/img_status3.png':'img/img_status1.png'" class="icon_status" alt="">
				<p class="time"></p>
			</div>
			<div>
				<p class="tips_head">完善资料</p>
				<img :src="status4==2?'img/img_status2.png':status4==1?'img/img_status3.png':'img/img_status1.png'" class="icon_status" alt="">
				<p class="time"></p>
			</div>
			<div>
				<p class="tips_head">号码发货</p>
				<img :src="status5==2?'img/img_status2.png':status5==1?'img/img_status3.png':'img/img_status1.png'" class="icon_status" alt="">
				<p class="time"></p>
			</div>
			<div>
				<p class="tips_head">确定收货</p>
				<img :src="status6==2?'img/img_status2.png':status6==1?'img/img_status3.png':'img/img_status1.png'" class="icon_status" alt="">
				<p class="time"></p>
			</div>
		</div>
	</div>
	<div v-show="step==1">
		<div class="box_shadow order1 pad_usual bg_ff">
			<div class="head">号码信息</div>
			<ul class="order_info">
				<li><p class="number_span"><span>130</span><span>1010</span><span>2959</span></p></li>
				<li>归属地：成都</li>
				<li>运营商：移动</li>
				<li>套餐： 99元霸王卡套餐</li>
				<li class="order_free"><span class="red">￥ 100 </span>(含话费40元)</li>
			</ul>
		</div>
		<div class="box_shadow bg_ff pad_usual address">
			<div class="head">收货地址</div>
			<p class="item1"><label>洛熙</label>14893820754</p>
			<p class="item2">
				四川省成都市成华区某某路
			</p>
		</div>

		<div class="mt_35h line_list order_book">
			<div class="title">入网资料</div>
			<div class="user_img_box">
				<div class="photo_box">
					<div class="img_card">
						<div class="img">
							<img src="img/card_z.png" alt="" class="card_img">
							<p class="img_info">身份证正面</p>
							<img src="img/card_f.png" alt="" class="card_img">
							<p class="img_info">身份证反面</p>
						</div>
						<div class="img2">
							<img src="img/card_p.png" class="card_person" alt="">
							<p class="img_info">手持身份证</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="box_shadow_ff mt_35h order_book">
		<div class="title">号码信息</div>
		<ul class="info number_box">
			<li>
				<div class="number_span">
					<span>139</span><span>1910</span><span>2959</span>
				</div>
			</li>
			<li>
				归属地：成都
			</li>
			<li>
				运营商：移动
			</li>
			<li>
				套餐：99元大王卡套餐
			</li>
			<li class="number_free">
				<span class="text_blue">￥100</span>&nbsp;&nbsp;(含话费40元)
			</li>
		</ul>
	</div>


		<div class="btn_box mt_1rem order_btn1">
			<div class="btn" @click="cancelOrder">取消订单</div>
			<div class="btn on" @click="order_pay_btn">去支付</div>
			<div class="btn on" @click="completeBtn">去完善</div>
		</div>
	</div>
	<!--<div v-show="step==2">
		<div class="box_shadow verify verify_two">
			<ul class="code_input">

			</ul>
		</div>
		<div class="btn_box">

		</div>
	</div>
	<div v-show="step==3">
		<div class="box_shadow verify tips">
		你的登陆密码已经修改完成了哦~
		</div>
	</div>-->
	<!--<div class="layer_mask order_pay_success" v-show="paySucc">
		<div class="layer_mask_box">
			<div class="title">支付成功</div>
			<div class="content mt_10h">
				根据国家实名制要求，需要完善入网信息，页面正在跳转中({{jumpInter}}s)...
			</div>
		</div>
	</div>-->

</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
var app = new Vue({
	el:"#app",
	data:{
	    text:'text',
		password:'password',
		pwdOldIf:true,
        pwdOld2If:true,
		left:0,
		width:document.body.clientWidth,
	    status1:2,
		status2:1,
		status3:1,
		status4:1,
		status5:1,
		status6:1,
		step:1,
		jumpInter:3,
        paySucc:false,
	},
	methods:{
	    //支付按钮
		order_pay_btn:function () {
			this.status1=3;
			this.status2=3;
			this.status3=2;
            document.getElementById("scrollBox").scrollLeft=this.width/3;
            this.jumpBtn();
            this.paySucc=true;

        },
        cancelOrder:function () {
            location.href="user.html";
        },
        completeBtn:function () {
			location.href="online_add.html";
        },
		jumpBtn:function () {
			var that = this;
			setTimeout(function () {
				that.jumpInter = that.jumpInter-1;
				if(that.jumpInter==0){
				    location.href="online_add.html";
				}else{
				    that.jumpBtn()
				}
            },1000)
        },
        passwordCancel:function () {
			location.href="user.html";
        },
        passwordStep1:function () {
            this.status1=3;
			this.status2=2;
			this.step=2;
        },
        passwordStep2:function () {
			this.status2=3;
			this.status3=2;
			this.step=3;
        }
	},
	created:function(){},
	mounted:function(){
	    document.getElementById("scrollBox").scrollLeft=0;
	}
})	

</script>
</body>
</html>